<template>
    <div class="loginPagg">
        <div class="topbox">
            <p class="logoH">登录</p>
            <p>欢迎您登陆</p>
        </div>
        <div class="loginForm">
            <div class="line-item">
                <i class="el-icon-user icon"></i>
                <div class="inputbox">
                    <input
                        type="text"
                        class="lineinput"
                        v-model="uname"
                        placeholder="用户名"
                    />
                    <div class="error" v-show="0">错误</div>
                </div>
            </div>
            <div class="line-item getCodeBox">
                <i class="el-icon-lock icon"></i>
                <div class="inputbox">
                    <input
                        :type="!isShowPwd?'password':'text'"
                        v-model="pwd"
                        class="lineinput mmicon"
                        placeholder="密码"
                    />
                    <div class="error" v-show="0">从无</div>
                </div>
                <preview-open class="priv" @click="isShowPwd=false" v-if="isShowPwd" theme="outline" size="16" fill="#888"/>
                <preview-close class="priv" @click="isShowPwd=true" v-if="!isShowPwd" theme="outline" size="16" fill="#888"/>
            </div>
            <button class="btn-submit mTop100" @click="onLogin">马上验证</button>
        </div>
    </div>
</template>

<script>
import { isEmpty } from "@/utils/validate";
import {   user_login } from "@/api/login";
import { saveLocalData } from "@/utils/public";
import { setToken } from "@/utils/auth";
import Tools from "@/utils/tools"
import {PreviewOpen, PreviewClose} from "@icon-park/vue"
export default {
    name: "LoginPage",
    data() {
        return {
            uname: "", // 手机号
            pwd: "", //验证码
            isShowPwd: false, //
        };
    },
    components: {PreviewOpen, PreviewClose},
    methods: {
        checkLogin() {
            // 检测登录
            return new Promise((resolve) => {
                if (isEmpty(this.uname)) {
                    this.$message.error("请输入登录账号~");
                    return;
                }
                if (isEmpty(this.uname)) {
                    this.$message.error("请输入登录密码~");
                    return;
                }
                resolve();
            }).catch(e => {
                console.error(e)
            });
        },
        onLogin() {
            // 登录
            Tools.showLoading();
            this.checkLogin().then(() => {
                this.onGetLogin().then((res) => {
                    console.log("login----", res);
                    if (res && res.code === 0) {
                        let user = res.user;
                        let token = res.token;
                        setToken(token); //设置token到cookie
                        this.$store.commit('SET_TOKEN', token);
                        saveLocalData('user', user); //保存用户到本地
                        this.$router.push({
                            name: "adReportForms"
                        })
                    } else {
                        let errMsg = [
                            "成功",
                            "验证码错误或失效",
                            "用户不存在或用户已离职",
                            "登录失败，请稍后重新尝试！",
                        ];
                        let code = res.code;
                        let msg = "";
                        if (code != undefined) {
                            msg = errMsg[code];
                        }
                        this.$message.error(res?.msg || msg || "登录失败");
                    }
                    Tools.hideLoading();
                });
            }).catch(() => {
                Tools.hideLoading();
            });
        },
        onGetLogin() {
            //请求接口登录
            return user_login({
                username: this.uname,
                password: this.pwd,
            }).catch(() => {
                Tools.hideLoading();
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.getCodeBox{
    position: relative;
    .priv{
        right: 15px;
        display: inline-flex;
        width: 60px;
        align-items: center;
        justify-content: center;
        height: 60px;
        position: absolute;
    }
}

</style>